import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Query } from 'react-apollo'
import {
  Grid, Image, Card, Progress, Button, Segment, Icon, Header,
} from 'semantic-ui-react'
import { global as globalDuck } from 'ducks'
import GetWorks from 'graphql/home/getWorks.graphql'
import Loading from 'components/loading'
import { LABEL_ADDRESS } from 'env'

class HomePage extends Component {
  render() {
    const { user } = this.props
    return (
      <Query query={GetWorks} variables={{ userId: user.id }} fetchPolicy="network-only">
        {({ loading, error, data }) => {
          if (loading) return <Loading />
          if (error) return `Error! ${error.message}`
          return (
            <Grid style={{ width: '100%', padding: '1em' }}>
              <Grid.Row>
                <Grid.Column width={16}>
                  <Grid>
                    <Grid.Row columns={1}>
                      <Grid.Column>
                        {data.user_task_count_view.length === 0 && (
                          <Segment placeholder>
                            <Header icon>
                              <Icon name="smile outline" />
                              目前没有未完成的任务
                            </Header>
                          </Segment>
                        )}
                        <Card.Group>
                          {data.user_task_count_view.map((work) => {
                            const total = parseInt(work.in_progress, 10) + parseInt(work.done, 10)
                            const done = parseInt(work.done, 10)
                            return (
                              (
                                <Card>
                                  <Card.Content>
                                    <Image
                                      floated="right"
                                      size="mini"
                                      src={work.project_object.owner_object.avatar}
                                    />
                                    <Card.Header>{work.project_object.name}</Card.Header>
                                    {/* <Card.Meta style={{ marginTop: '1em' }}>
                                      <Image
                                        src="https://img.icons8.com/ultraviolet/2x/animation-rig.png"
                                        size="mini"
                                      />
                                    </Card.Meta> */}
                                    <Card.Description>
                                      <Progress
                                        percent={Math.floor(done / total * 100)}
                                        size="tiny"
                                        style={{ marginTop: '1em' }}
                                        indicating
                                      >
                                        {`${done} / ${total}`}
                                      </Progress>
                                    </Card.Description>
                                  </Card.Content>
                                  <Card.Content extra textAlign="center">
                                    <Button
                                      basic
                                      color="green"
                                      onClick={() => {
                                        const win = window.open(
                                          `${LABEL_ADDRESS}/label/${work.project_object.id}`,
                                          '_blank',
                                        )
                                        win.focus()
                                      }}
                                    >
                                      开始标注
                                    </Button>
                                  </Card.Content>
                                </Card>
                              )
                            )
                          })}
                        </Card.Group>
                      </Grid.Column>
                    </Grid.Row>
                  </Grid>
                </Grid.Column>
              </Grid.Row>
            </Grid>
          )
        }}
      </Query>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

export default connect(mapStateToProps)(HomePage)
